<template>
	<view  class="page_app"
    :style="pageStyle" :class="pageTitleClass">
		<view class="header_box" :style="headerStyleH"></view>
		<!-- 展示内容 -->
		<view class="header_box" :style="headerStyle">
			<slot name="header"></slot>
		</view>
		<!-- 展示内容 -->
		<view class="header_box" :style="headerStyle">
			<slot name="header2" v-if="viewOpacity"></slot>
		</view>
		<!-- 隐藏背景 -->
		<view class="header_bg_fiexd" :style="headerTitleBg">
			
		</view>
		<image src="../../../static/turn.png" :style="turnImgStyle" v-if="showTurn" @click="showTurnHandle"></image>
		<image src="../../../static/turnb.png" :style="turnImgStyle" v-if="showTurnB" @click="showTurnHandle"></image>
		
		<!-- 页面内容插槽 -->
		<view class="bg_box_img_before" v-if="homejb == 'entryScore'">
			<view class="bg_box_img" :style="bgBoxStyle" >
				<image src="../../../static/luqu.png" class="luqu_img"></image>
			</view>
		</view>
		<view class="bg_box_img_before" v-if="homejb == 'invite'">
			<view class="bg_box_img" :style="bgBoxStyle" >
				<image src="../../../static/mine/yq1.png" class="yq1_img"></image>
			</view>
		</view>
		<view class="bg_box_img_before order_box" v-if="homejb == 'order'">
			<view class="bg_box_img" :style="bgOderBoxStyle" >
				<!-- <image src="../../../static/mine/yq1.png" class="yq1_img"></image> -->
			</view>
		</view>
	    <slot></slot>
	    <slot name="footer"></slot>
	</view>
</template>

<script>
	export default {
		props:{
			homejb:{
				default:'',
			},
			titBgColor:{
				default:'#CFFFF9',
			},
			scrollTopNum:{
				default:0,
			},
			showTurn:{
				default:false,
			},
			showTurnB:{
				default:false,
			},
		},

		data() {
			return {
				viewOpacity:false
			};
		},
		computed:{
			turnImgStyle(){
				return {
					'width': '40rpx',
					'height': '40rpx',
					'position': 'fixed',
					'z-index': '10',
					'top': (this.$store.state.jiaonang.top + this.$store.state.jiaonang.height/2) + "px",
					"margin-top":'-'+uni.upx2px(20)+'px',
					'left': '30rpx'
				}
			},
			pageTitleClass(){
				if(this.homejb == 'home' || this.homejb == 'mine'){
					return 'home_jb'
				}else{
					return ''
				}
			},
			pageStyle(){
				return {
					'padding-top':this.$store.state.jiaonang.top + "px",
					'box-sizing': 'border-box'
				}
			},
			headerStyleH(){
				return {
					'height':this.$store.state.jiaonang.height + "px",
					'position': 'relative',
	
					
				}
			},
			
			headerTitleBg(){
				let opacity = this.scrollTopNum > 50 ? 1 : this.scrollTopNum/50;
				this.viewOpacity = opacity >= 1 ? true : false;
				return {
					'background-color':this.titBgColor,
					'position': 'fixed',
					'width': '750rpx',
					'height':( Number( this.$store.state.jiaonang.height) + 4) + "px",
					'top': 0,
					'left': 0,
					'opacity': opacity,
					'padding-top':this.$store.state.jiaonang.top + "px",
					'z-index':8
				}
			},
			headerStyle(){
				return {
					'height':this.$store.state.jiaonang.height + "px",
					// 'position': 'relative',
				
					'position': 'fixed',
					'width': '750rpx',
					'height':this.$store.state.jiaonang.height + "px",
					'top': this.$store.state.jiaonang.top + "px",
					'left': 0,
				
					'z-index':9
				}
			},
			bgBoxStyle(){
				console.log(this.$store.state.jiaonang)
				return {
					'position': 'relative',
					'bottom': this.$store.state.jiaonang.bottom + "px",
				}
			},
			bgOderBoxStyle(){
				console.log(this.$store.state.jiaonang)
				return {
					'position': 'relative',
					'bottom': this.$store.state.jiaonang.bottom + "px",
					'background': 'linear-gradient( 180deg, #3677F6 0%, #91B6FF 100%)',
					'border-radius': '0rpx 0rpx 40rpx 40rpx',
					'width':'750rpx',
					'height':this.$store.state.jiaonang.bottom + uni.upx2px(250) + 'px'
				}
			}
		},
		onShow() {
			
		},
		methods:{
			showTurnHandle(){
				this.$emit("showTurnHandle")
			}
		}
	}
</script>

<style lang="scss">
	.page_app{
		min-height: 100vh;
	}
	.home_jb{
		background-image: linear-gradient(210deg, #CFFFF9 0,#E8FFF1 150rpx, #fcffff 600rpx);
	}
	.header_bg_fiexd{
		background-color:#f8fffc;
		position: fixed;
		width: 750rpx;
		height: 180rpx;
		top: 0;
		left: 0;
		opacity: 1;
	}
	.bg_box_img_before{
		width: 750rpx;
		height: 560rpx;
		&.order_box{
			height: initial;
		}
		.bg_box_img{
			.luqu_img{
				width: 750rpx;
				height: 560rpx;
			}
			.yq1_img{
				width: 750rpx;
				height: 642rpx;
			}
		}
	}
	
</style>
